<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker v-model="date" :picker-options="pickerOptions" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
      <el-button v-permission="['user:report']" type="primary" icon="el-icon-search" @click="search">查找</el-button>
    </div>
    <div class="margin-top-20"/>
    <div id="report"/>
  </div>
</template>

<script>
import { ReportService } from '@/api/ReportService'
import { Alert } from '@/utils/notify'
import echarts from 'echarts'
import { Util } from '@/utils/index'

export default {
  name: 'OrderReport',
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      date: [], report: undefined,
      options: {
        title: { text: '订单及销售额趋势', subtext: '最多统计90天的数据', right: '45%' },
        tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#14bc54' }}},
        legend: { bottom: 0, data: ['订单量', '销售额'] },
        xAxis: [{ type: 'category', data: [], axisPointer: { type: 'shadow' }}],
        yAxis: [
          { type: 'value', name: '订单量', min: 0, axisLabel: { formatter: '{value} 单' }},
          { type: 'value', name: '营业额', min: 0, axisLabel: { formatter: '{value} 元' }}
        ],
        series: [
          { name: '订单量', type: 'bar', data: [] },
          { name: '销售额', type: 'line', yAxisIndex: 1, data: [] }
        ]
      }
    }
  },
  mounted() {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
    this.date = [start, end]

    this.report = echarts.init(document.getElementById('report'))
    this.report.setOption(this.options)
    window.addEventListener('resize', function() { this.report.resize() })

    this.search()
  },
  methods: {
    search() {
      if (!this.date || this.date.length !== 2) {
        Alert.warn(this, '请选择时间,最长不能超过90天!')
        return
      }
      let end = this.date[1]
      let start = this.date[0]
      const days = (end - start) / (1 * 24 * 60 * 60 * 1000)
      if (days > 90) {
        Alert.warn(this, '时间最长不能超过90天!')
        return
      }
      start = Util.formatDate(this.date[0], 'yyyy-MM-dd')
      end = Util.formatDate(this.date[1], 'yyyy-MM-dd')
      this.options.xAxis[0].data = []
      this.options.series[0].data = []
      this.options.series[1].data = []
      ReportService.orderReport(start, end).then(result => {
        if (result) {
          result.forEach(item => {
            this.options.xAxis[0].data.push(Util.formatDate(Util.parseDate(item.date), 'yyyy-MM-dd'))
            this.options.series[0].data.push(item.count)
            this.options.series[1].data.push(item.numeric)
          })
        }
        this.report.setOption(this.options)
      })
    }
  }
}
</script>

<style scoped>
  #report{width: 100%;height: 600px;margin: 0 auto;}
</style>

